<template>
  <div class="wrapper">
    <div class="card">
      <div class="header">{{ dayData.weekday }}</div>
      <h1 class="text lunar">{{ dayData.lunar }}</h1>
      <h2 class="text date">{{ dayData.date }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dayData: Object
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: .15rem;
  box-sizing: border-box;

  .card {
    background: url('../../assets/img/bg.jpg') no-repeat center/cover;
    border: 1px solid #ddd;
    border-radius: .15rem;
    overflow: hidden;
    color: #fff;
    .header {
      height: .35rem;
      padding: .1rem;
      box-sizing: border-box;
      font-size: .14rem;
      background: rgba(0, 0, 0, 0.3);
    }

    .text {
      text-align: center;
      margin: .3rem 0;
      text-shadow: .02rem .05rem .05rem #666;
      &.lunar{
        color: #f75555;
        font-size: .5rem;
        font-weight: bold;
      }
      &.date{
        font-size: .2rem;
      }
    }
  }
}

</style>